<template>
  <div class="home-container">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#ffffff"
          class="el-menu-vertical"
          default-active="1"
          text-color="#1a202c"
          router
        >
        <div class="box">
          <img src="../../img/1.jpg" alt="cw" style="width: 100%; height: 100%;" />
        </div>
        <el-menu-item index="/home/page1">
            <span>大数据统计界面</span>
          </el-menu-item>
          <el-menu-item index="/home/page2">
            <span>美食信息管理</span>
          </el-menu-item>
          <el-menu-item index="/home/page3">
            <span>美食供应商管理</span>
          </el-menu-item>
          <el-menu-item index="/home/page4">
            <span>美食订单管理</span>
          </el-menu-item>
          <el-menu-item index="/home/page5">
            <span>美食投诉处理</span>
          </el-menu-item>
          <el-menu-item index="/home/page6">
            <span>个人信息界面</span>
          </el-menu-item>
          <el-menu-item index="/">
            <span>确认退出系统</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

     <!-- 主内容区 -->
  <el-main>
    <div class="bigbox">
      <router-view></router-view>
    </div>
  </el-main>
    </el-container>
  </div>

</template>

<script setup>

</script>

<style scoped>
.home-container {
  height: 100vh;
  background: linear-gradient(145deg, #fff3e0 0%, #ffe0b2 100%); /* 面包黄渐变[8](@ref) */
}

.el-menu-vertical {
  height: 100%;
  background: rgba(255,245,240,0.98) !important; /* 浅橙透明背景 */
  border-right: 1px solid rgba(230,126,34,0.15); /* 胡萝卜橙边框[8](@ref) */
}

.el-aside {
  background: linear-gradient(160deg, #ffedd5 30%, #fff3e0 100%); /* 米色渐变 */
  box-shadow: 4px 0 15px rgba(231,76,60,0.1); /* 番茄红阴影[4](@ref) */
}

.el-main {
  padding: 20px;
  background: rgba(255,253,249,0.97); /* 珍珠白 */
}

.bigbox{
  background: transparent;
  box-shadow: 0 4px 30px rgba(230,126,34,0.08); /* 胡萝卜橙阴影[8](@ref) */
}

.box{
  background: linear-gradient(145deg, #e74c3c 0%, #e67e22 100%); /* 番茄红-胡萝卜橙渐变[4](@ref) */
  box-shadow: 0 4px 6px rgba(231,76,60,0.15);
}

/* 菜单项 */
.el-menu-item {
  margin: 8px 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.el-menu-item:hover {
  background: rgba(230,126,34,0.1) !important; /* 胡萝卜橙透明 */
  transform: translateX(5px);
}

.el-menu-item.is-active {
  background: linear-gradient(90deg, #e74c3c 0%, #e67e22 100%) !important; /* 番茄红-橙渐变[4](@ref) */
  color: white !important;
  box-shadow: 0 4px 6px rgba(231,76,60,0.15);
}

/* 文字 */
.el-menu-item span {
  color: #d35400; /* 深橙色[4](@ref) */
  font-weight: 600;
}

.el-menu-item.is-active span {
  color: white !important;
}
</style>